<template>
	<view class="theme-page">
		<!-- 页面标题 -->
		<view class="page-header">
			<text class="page-title">主题设置</text>
			<text class="page-subtitle">选择您喜欢的外观模式</text>
		</view>
		
		<!-- 主题选择器 -->
		<view class="theme-section">
			<ThemeSelector 
				:showPreview="true" 
				@themeChanged="onThemeChanged"
			/>
		</view>
		
		<!-- 其他主题相关设置已移除以保持与设置页面的一致性 -->
		
		<!-- 主题说明 -->
		<view class="info-section">
			<view class="info-card">
				<view class="info-header">
					<uni-icons type="info" size="18" color="#3B82F6" />
					<text class="info-title">主题说明</text>
				</view>
				<text class="info-content">
					• 浅色模式：适合白天使用，视觉清晰明亮
					• 深色模式：适合夜间使用，减少眼睛疲劳
					• 跟随系统：根据系统设置自动切换主题
				</text>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import ThemeSelector from '@/components/ThemeSelector.vue'

export default {
	name: 'ThemePage',
	
	components: {
		ThemeSelector
	},
	
	computed: {
		...mapState('settings', ['display'])
	},
	
	onLoad() {
		// 设置导航栏标题
		uni.setNavigationBarTitle({
			title: '主题设置'
		})
	},
	
	methods: {
		...mapActions('settings', ['updateDisplay']),
		
		// 主题切换回调
		onThemeChanged(theme) {
			console.log('主题已切换到:', theme)
		},
		
		// 已移除显示设置相关方法以保持一致性
	}
}
</script>

<style lang="scss" scoped>
.theme-page {
	min-height: 100vh;
	background-color: var(--bg-primary);
	padding: $spacing-lg;
	transition: background-color 0.3s ease;
}

.page-header {
	text-align: center;
	margin-bottom: $spacing-2xl;
}

.page-title {
	display: block;
	font-size: $font-size-title-1;
	font-weight: $font-weight-semibold;
	color: var(--text-primary);
	margin-bottom: $spacing-sm;
	transition: color 0.3s ease;
}

.page-subtitle {
	font-size: $font-size-body;
	color: var(--text-secondary);
	transition: color 0.3s ease;
}

.theme-section {
	margin-bottom: $spacing-2xl;
}

.settings-section {
	margin-bottom: $spacing-2xl;
}

.section-header {
	margin-bottom: $spacing-lg;
}

.section-title {
	font-size: $font-size-title-2;
	font-weight: $font-weight-semibold;
	color: var(--text-primary);
	transition: color 0.3s ease;
}

.settings-card {
	background-color: var(--bg-secondary);
	border-radius: $border-radius-md;
	overflow: hidden;
	box-shadow: 0 2px 4px 0 var(--shadow-color);
	transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.setting-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: $spacing-lg;
	border-bottom: 1px solid var(--border-color);
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.3s ease;
	
	&:last-child {
		border-bottom: none;
	}
	
	&:active {
		background-color: var(--bg-primary);
	}
}

.setting-info {
	flex: 1;
	margin-right: $spacing-lg;
}

.setting-label {
	display: block;
	font-size: $font-size-body;
	font-weight: $font-weight-semibold;
	color: var(--text-primary);
	margin-bottom: $spacing-xs;
	transition: color 0.3s ease;
}

.setting-desc {
	font-size: $font-size-caption;
	color: var(--text-secondary);
	line-height: $line-height-caption;
	transition: color 0.3s ease;
}

.setting-value {
	display: flex;
	align-items: center;
	gap: $spacing-sm;
}

.value-text {
	font-size: $font-size-body;
	color: var(--text-secondary);
	transition: color 0.3s ease;
}

.info-section {
	margin-top: $spacing-xl;
}

.info-card {
	background-color: var(--bg-secondary);
	border-radius: $border-radius-md;
	padding: $spacing-lg;
	border: 1px solid var(--border-color);
	transition: background-color 0.3s ease, border-color 0.3s ease;
}

.info-header {
	display: flex;
	align-items: center;
	margin-bottom: $spacing-md;
	gap: $spacing-sm;
}

.info-title {
	font-size: $font-size-title-2;
	font-weight: $font-weight-semibold;
	color: var(--text-primary);
	transition: color 0.3s ease;
}

.info-content {
	font-size: $font-size-body;
	color: var(--text-secondary);
	line-height: $line-height-body;
	transition: color 0.3s ease;
}
</style> 